<template>
  <div class="login">
    <login-form
      @loginRequest="login"
      :rules="rules"
      :fileds="fileds"
      showLabel
      btnCon="注册"
    ></login-form>
  </div>
</template>
<script>
import { mapMutations, mapActions } from "vuex";
import LoginForm from "./components/LoginForm.vue";
export default {
  components: {
    LoginForm,
  },
  data() {
    return {
      rules: {
        username: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          {
            min: 5,
            max: 20,
            message: "用户名需要符合5-20位",
            trigger: "blur",
          },
          {
            pattern: /^[a-zA-Z0-9]+$/,
            message: "用户名不符合规则",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 5,
            message: "密码长度不低于5位",
            trigger: "blur",
          },
        ],
        email: [],
      },
      fileds: [
        {
          prop: "username",
          type: "text",
          label: "用户名",
          placeholder: "请输入用户名",
        },
        {
          prop: "password",
          type: "password",
          label: "密码",
          placeholder: "请输入密码",
        },
        {
          prop: "email",
          type: "email",
          label: "邮箱",
          placeholder: "请输入邮箱",
        },
      ],
      timer: null,
    };
  },
  methods: {
    ...mapMutations(["SET_TOKEN", "SET_USER_NAME"]),
    ...mapActions({
      loginAction: "login",
    }),
    async login(val) {
      await this.loginAction(val);
      this.timer = setTimeout(() => {
        this.$router.push({
          name: "Home",
        });
      }, 1500);
    },
  },
  beforeDestroy() {
    window.clearTimeout(this.timer);
  },
};
</script>
<style lang="stylus" scoped>
.login
  height 100vh
  display flex
  justify-content center
  align-items center
</style>
